<template>
	<div class="listPage">
		<!-- 添加按钮 -->
		<el-button type="primary" @click="handleAdd()">添加分类</el-button>

		<!-- 表格 -->
		<el-table :data="equipmentTypes" style="width: 100%">
			<el-table-column prop="equipmentTypeId" label="设备类型ID" width="100"></el-table-column>
			<el-table-column prop="equipmentTypeName" label="设备类型名称" width="180"></el-table-column>
			<el-table-column prop="equipmentTypeFullName" label="设备类型全称" width="180"></el-table-column>
			<el-table-column prop="equipmentTypeCode" label="设备类型代码" width="180"></el-table-column>
			<el-table-column prop="equipmentTypeNumber" label="设备数量" width="100"></el-table-column>
			<el-table-column prop="remarks" label="备注" width="180"></el-table-column>
			<el-table-column label="操作" width="180">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button size="mini" type="danger"
						@click="handleDelete(scope.$index, scope.row.equipmentTypeId)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-size="pageSize"
			layout="total, prev, pager, next" :total="totalElements">
		</el-pagination>
		<editType :form="editForm" :title="'编辑分类'" :editDialogVisible.sync="editDialogVisible" :isEdit="isEdit" :form-label-width="formLabelWidth"></editType>
	</div>
</template>

<script>
	import editType from './editType.vue';
	import axios from 'axios';

	export default {
		name: 'ListPage',
		components: {
			editType
		},
		data() {
			return {
				equipmentTypes: [],
				currentPage: 1,
				pageSize: 5,
				totalElements: 0,
				editDialogVisible: false,
				addForm: {
					equipmentTypeName: '',
					equipmentTypeFullName: '',
					equipmentTypeCode: '',
					equipmentTypeNumber: '',
					isLeaf:0,
					statusFlag:0,
					remarks: '',
					sortIndex:0,
					lev:0,
					space:''
				},
				editForm: {
					equipmentTypeId: '',
					equipmentTypeName: '',
					equipmentTypeFullName: '',
					equipmentTypeCode: '',
					equipmentTypeNumber: '',
					remarks: ''
				},
				isEdit: false,
				formLabelWidth: '120px'
			};
		},
		methods: {
			fetchEquipmentTypes(pageNum) {
				console.log("调用到了");
				axios.get('http://localhost:8080/equipType/queryList', {
						params: {
							statusFlag:0,
							pageNumber: pageNum,
							pageSize: this.pageSize
						}
					})
					.then(response => {
						const data = response.data;
						this.equipmentTypes = data.result.Content;
						this.totalElements = data.result.TotalElements;
					})
					.catch(error => {
						console.error('Error fetching equipment types:', error);
						alert("查询有误 请联系管理员");
					});
			},
			handlePageChange(newPage) {
				this.fetchEquipmentTypes(newPage);
			},
			handleAdd() {
				this.editDialogVisible = true;
				this.editForm = this.addForm;
				this.isEdit=false;
			},
			handleEdit(row) {
				
				this.editDialogVisible = true;
				this.editForm = {
					...row
				};
				this.isEdit=true;
			},
			handleDelete(index, equipmentTypeId) {
				this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// 确认删除后执行的逻辑
					axios.get('http://localhost:8080/equipType/del', {
							params: {
								equipmentTypeId: equipmentTypeId
							}
						})
						.then(response => {
							if (response.data.code == 200) {
								this.$message({
									type: 'success',
									message: response.data.message
								});
								this.equipmentTypes.splice(index, 1);
							} else {
								this.$message({
									type: 'error',
									message: response.data.message
								});
							}
						})
						.catch(error => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							});
						});
				})
			},
			cons(){
				console.log("this",this.editDialogVisible);
			}
		},
		mounted() {
			this.fetchEquipmentTypes(this.currentPage);
			this.cons();
		}
	};
</script>

<style scoped>
	.listPage {
		width: 80%;
		height: 100%;
	}
</style>